{% extends "base.html" %}

{% block title %}登录日志{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm fade-in">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="bi bi-file-earmark-text me-2"></i>登录日志
                    </h4>
                    <span class="badge bg-light text-dark">{{ logs.total }} 条记录</span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>用户名</th>
                                    <th>IP地址</th>
                                    <th>用户代理</th>
                                    <th>登录时间</th>
                                    <th>状态</th>
                                    <th>失败原因</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for log in logs.items %}
                                <tr class="fade-in-row" style="animation-delay: {{ loop.index * 0.1 }}s">
                                    <td class="align-middle">
                                        <i class="bi bi-person-circle me-2"></i>{{ log.username }}
                                    </td>
                                    <td class="align-middle">
                                        <i class="bi bi-geo-alt me-2"></i>{{ log.ip_address }}
                                    </td>
                                    <td class="align-middle">
                                        <i class="bi bi-browser-chrome me-2"></i>
                                        <span data-bs-toggle="tooltip" title="{{ log.user_agent }}">
                                            {{ log.user_agent[:50] }}{% if log.user_agent|length > 50 %}...{% endif %}
                                        </span>
                                    </td>
                                    <td class="align-middle">
                                        <i class="bi bi-clock me-2"></i>{{ log.login_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                    </td>
                                    <td class="align-middle">
                                        {% if log.status == 'SUCCESS' %}
                                        <span class="badge bg-success">
                                            <i class="bi bi-check-circle me-1"></i>成功
                                        </span>
                                        {% else %}
                                        <span class="badge bg-danger">
                                            <i class="bi bi-x-circle me-1"></i>失败
                                        </span>
                                        {% endif %}
                                    </td>
                                    <td class="align-middle">
                                        {% if log.failure_reason %}
                                        <span class="badge bg-warning text-dark" data-bs-toggle="tooltip" title="{{ log.failure_reason }}">
                                            <i class="bi bi-exclamation-triangle me-1"></i>{{ log.failure_reason[:20] }}{% if log.failure_reason|length > 20 %}...{% endif %}
                                        </span>
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="6" class="text-center">
                                        <div class="py-5">
                                            <i class="bi bi-file-earmark-x fs-1 text-muted"></i>
                                            <p class="mt-3 mb-0 text-muted">暂无登录日志</p>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页 -->
                    {% if logs.pages > 1 %}
                    <nav aria-label="日志分页">
                        <ul class="pagination justify-content-center">
                            {% if logs.has_prev %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for(request.endpoint, page=logs.prev_num, **request.view_args) }}">
                                    <i class="bi bi-chevron-left"></i>
                                </a>
                            </li>
                            {% endif %}
                            
                            {% for page_num in logs.iter_pages() %}
                            {% if page_num %}
                            {% if page_num != logs.page %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for(request.endpoint, page=page_num, **request.view_args) }}">{{ page_num }}</a>
                            </li>
                            {% else %}
                            <li class="page-item active">
                                <span class="page-link">{{ page_num }}</span>
                            </li>
                            {% endif %}
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">…</span>
                            </li>
                            {% endif %}
                            {% endfor %}
                            
                            {% if logs.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for(request.endpoint, page=logs.next_num, **request.view_args) }}">
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 初始化工具提示
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // 添加表格行动画
        const rows = document.querySelectorAll('.fade-in-row');
        rows.forEach(row => {
            row.style.opacity = '0';
            row.style.transform = 'translateY(10px)';
            setTimeout(() => {
                row.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                row.style.opacity = '1';
                row.style.transform = 'translateY(0)';
            }, 100);
        });
    });
</script>
{% endblock %}